【Day20】從零開始的程式大亂鬥：JavaScript－同步與非同步

2023 iThome 鐵人賽

DAY 18

自我挑戰組

那些有趣的程式系列第 20 篇

15th鐵人賽

dcheng0915

2023-10-06 23:59:35

147 瀏覽

分享至

我們可以將 同步（Sync） 與 非同步（Async） 理解為：

同步：做完一件事，再做另一件事
非同步：同時做好幾件事

JavaScript的 同步 程式碼：

console.log('Sync Begin.');
for (let number = 1; number <= 10; number++) {
    console.log('number:', number);
}
console.log('Sync End.');

輸出結果：

Sync Begin.
number: 1
number: 2
number: 3
number: 4
number: 5
number: 6
number: 7
number: 8
number: 9
number: 10
Sync End.

當程式碼為同步時，就是一件事、一件事的做，因此執行順序為：

顯示 Sync Begin.
進入 for 迴圈，執行迴圈內程式：
1. 顯示 1
2. 顯示 2
3. 顯示 3
4. 顯示 4
5. 顯示 5
6. 顯示 6
7. 顯示 7
8. 顯示 8
9. 顯示 9
10. 顯示 10
顯示 Sync End.

JavaScript的 非同步 程式碼：

console.log('Async Begin.');
setTimeout(function() {
    console.log('finish.');
}, 1000);
console.log('Async End.');

輸出結果：

Async Begin.
Async End.
finish.

程式碼中有非同步程式碼時，可以同時做好幾件事情，此程式的執行順序為：

顯示 Async Begin.
setTimeout 定時 1000毫秒後 顯示 finish.
顯示 Async End.
（過了1000毫秒）顯示 finish.

完整程式碼：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript－Sync and Async</title>
    </head>
    <body>
        <script>
            // 同步（Sync）程式碼：
            console.log('Sync Begin.');
            for (let number = 1; number <= 10; number++) {
                console.log('number:', number);
            }
            console.log('Sync End.');

            console.log('------------');

            // 非同步（Async）程式碼：
            console.log('Async Begin.');
            setTimeout(function() {
                console.log('finish.');
            }, 1000);
            console.log('Async End.');
        </script>
    </body>
</html>

輸出結果：

Sync Begin.
number: 1
number: 2
number: 3
number: 4
number: 5
number: 6
number: 7
number: 8
number: 9
number: 10
Sync End.
------------
Async Begin.
Async End.
finish.